<template>
  <div class="anySign">
    <div id="alert_dialog" class="alert_dialog" style="display: none;">

    <div class="alert_area">
      <div class="alert_text">签名偶发异常，请尝试重新签名。如果还是不行，请切换其它签名方式，并上报相关情况。</div>
      <div id="btnAlert" class="alert_btn">确 定</div>
    </div>

    </div>

    <div id="single_dialog" style=" display:none;padding: 0 0.04rem;">

        <div id="leftView1" style="float: left;clear: none;">
          <p id="anysign_title" style="padding-bottom: 20px;"></p>
          <div style="position: relative;">
            <div style="position: absolute; top:-10px; left: 30px; width: 100px; background: #fff; padding-left:20px; height:15px;">
            <img style="float: left;" width="15px" height="15px" src="image/bi.png" align="absmiddle"> 手写签名
            </div>
            <div id="single_signImage" class="signImagecss" style="overflow: hidden;"></div>
          </div>
        </div>
      

        <div id="single_tmpcanvascss" class="single_tmpcanvascss">
          <div id="single_signTitle" style="color: #E5E5E5;text-align: center;position: absolute;"></div>
          <canvas id="single_anysignCanvas" style="border: 1px solid;z-index: 1;position: relative;"></canvas>
        </div>

        <div id="btnContainerInner" class="btncontainer" style="margin-top: 0.5rem;">
          <div id="btnOK" class="button_new" style="float: left;margin-left: 2rem;" @click="signSubmit()">确 定</div>
          <div id="btnCancel" class="button_new" style="float: left;margin-left: 1rem;" >取 消</div>
          <div id="btnBack" class="button_new" style="float: left;margin-left: 1rem;">回 退</div>
        </div>

      </div>
    <div id="comment_dialog" style=" display:none;">

      <div id="leftView">
        <p id="comment_title"></p>
        <div id="signImage" class="signImagecss"></div>
      
      </div>

      <div id="tmpcanvascss" class="tmpcanvascss">
        <div id="signTitle"></div>
        <canvas id="comment_canvas"></canvas>
      </div>

      <div id="comment_btnContainerInner" class="comment_btncontainer">
        <input id="comment_ok" type="button" class="button orange" value="确 定">
        <input id="comment_back" type="button" class="button orange" value="后退">
        <input id="comment_cancel" type="button" class="button orange" value="取 消">
      </div>

    </div>

    <center>

      <div id="dialog" style=" display:none;">
        <!-- 显示签名区域-->
        <div id="anysign_title" style="color:#333333;" width="100%" height="10%">请投保人<span style="font-size:20pt;"> 李 元 </span>签名</div>
        <div id="container" onmousedown="return false;">
          <canvas id="anysignCanvas" width="2">
                      </canvas>
        </div>

        <div id="single_scrollbar" style="text-align: center;  vertical-align:middle; " width="100%">
          <span id="single_scroll_text"> *滑动操作：</span>
          <input id="single_scrollbar_up" type="button" class="button orange" value="左移" />
          <input id="single_scrollbar_down" type="button" class="button orange" value="右移" />
        </div>

        <div id="btnContainerOuter" width="100%">

          <div id="btnContainerInner" style="text-align: center;   font-size:5pt;" width="100%">
            <input id="btnOK" type="button" class="button orange" value="确 定" @click="signSubmit()" />
            <input id="btnClear" type="button" class="button orange" value="清 屏" onclick="javascript:clear_canvas();">
            <input id="btnCancel" type="button" class="button orange" value="取 消" onclick="cancelSign();">
          </div>

        </div>

      </div>
      
      <div id="other">

      <!-- <input type="button" name="初始化接口" value="初始化接口" style="width: 180px" onclick="javascript:testAnySign(112321321);">
      <br>
      
      <br>
      <input type="button" name="设置表单数据" value="设置表单数据" style="width: 180px" onclick="javascript:testSetTemplateData();">
      <br> -->
        
      <!-- <br>
      <input type="button" name="单字签名" value="单字签名1" style="width: 180px" @click="testPopupDialog(20)">
      <br> -->
      <br>
      <input type="button" name="单字签名" value="单字签名" style="width: 180px" @click="testPopupDialog(21)">
      <br>
      <br>
      <br>
      <br>
      <!-- <br>
      <input type="button" name="批注签名" value="批注签名" style="width: 180px" onclick="javascript:testCommentDialog(30);">
      <br> -->
      <!-- <br>
      <input type="button" name="生成上传数据" value="生成上传数据" style="width: 180px" @click="testGenData()">
      <br> -->
      <!-- <br>
      <input type="button" name="上传数据是否准备就绪" value="上传数据是否准备就绪" style="width: 180px" onclick="javascript:testIsReadyToUpload();">
      <br>
      
      <br>
      <input type="button" name="获取版本信息" value="获取版本信息" style="width: 180px" onclick="javascript:testGetVersion();">
      <br>
      <br>
      <input type="button" name="获取操作系统信息" value="获取操作系统信息" style="width: 180px" onclick="javascript:testGetOsInfo();">
      <br>
      <br>
      <input type="button" name="testAddEvidence" value="testAddEvidence" style="width: 180px" onclick="javascript:testAddEvidence();">
      <br>
      <br>
      <input type="button" name="testSaveBusinsee()" value="保存业务数据" style="width: 180px" onclick="javascript:testSaveBusiness();">
      <br>
      <br>
      <input type="button" name="testSaveBusinsee()" value="初始化API恢复业务数据" style="width: 180px" onclick="javascript:testRestoreBusiness();">
      <br> -->
      <!-- <img id="xss_20" src="" @click="testPopupDialog(20)"/>
      <br> -->
      
      <!-- <br>
      <img id="xss_21" src="" @click="testPopupDialog(21)" />
      <br> -->

      <textarea id="result" rows="10"></textarea>
      
      </div>

    </center>
  </div>

</template>
 
<script>
  // eslint-disable-next-line
  /* eslint-disable */
  import {
    Toast
  } from 'mand-mobile'
  export default {
    name: 'any-sign',
    components: {
    },
    props: {
      showFlag : {//是否默认展示签字框及批注框
        type : Object,
        default : function(){
          return {
            sign : true,
            comment : false,
            showComment : true,
            leftBtn : true,
            rightBtn : true,
            submitBtn : true,
            clearBtn : true,
            cancelBtn : true
          }
        }
      },
      isdistinguish:{
        type : Boolean,
        default:false
      },
      ocrCapture : {//识别参数
        type : Object,
        default : function(){
          return {
              text : "",//待识别字
              IPAdress : "http://192.168.126.32:11203/HWR/RecvServlet",//请求地址 https://znrz-stg.jryzt.com:10044/jkins/electronicSignature/ocr http://localhost:8082/esign_ocr
              appID : "123",//应用编码
              count : 5,
              // language : Language.CHS,//语言
              resolution : 80,//分辨率
              serviceID : "999999"//设备编码
          }
        }
      },
      channel : {
        type : Number,
        default : 999999
      },
      context_id : {
        type : Number,
        default : 20
      },
      templateId:{//用于生成PDF的模板ID
        type : String,
				default : "4000"
      },
      businessNo : {//集成信手书业务的唯一标识
      	type : String,
    		default : "123123"
      },
      formData :{//模板文件数据
      	type : String,
				default : "wedw"
      },
      signerInfo : {
        type : Object,
        default : function(){
            return {
              userName : "陈圣",
              idNo : "11011111111"
            }
        }
      },
      signTitle : {
        type : String,
        default : "请签名"
      },
      canvasClass : {
        type : Object,
        default : function(){
          return {
            submitBtn : "",
            clearBtn : "",
            cancelBtn : "",
            dialogBtn:"",
            commentBtn:"",
            leftMove:"",
            rightMove:"",
            containerClass:"",
            titleClass:""
          }
        }
      },
      signRule : {//签名放置规则
        type : Object,
        default : function(){
          return {
              keyWord : "乙方盖章",//关键字值  投保人签名
              keyWordAlignMethod : 3, //X轴偏移量
              yOffset : 0,//Y轴偏移量
              KWIndex : 1,//关键字索引
              pageNo : 0
            }
        }
      },
      signClass : {
        type : Object,
        default : function(){
          return {
            penColor : '#FF0000',
            singleWidth : 80,
            singleHeight : 80
          }
        }
      }
    },
    data(){
      return{
        apiInstance : null,
        signShowFlag : false,
        startTime : null,
        last : null,
        showbutton : true,
        sizeFlag:false,
        orientationFlag : (window.orientation == 0 || window.orientation == 180)?false:true,
        signInfo : {
            signData : null,
            signImg : null,
            commentImg : null
        },
      anysignstartload:false,
        
      }
    },
    computed:{
    },
    created(){

      if(typeof(window.anysignstartload) == 'undefined' ){
        this.anysignstartload = true
        window.anysignstartload = true

        //引入css
      this.initCss("https://cdn1.huaruisales.com/mobsite/lib/anysign/css/canvas_css.css")
      this.initCss("https://cdn1.huaruisales.com/mobsite/lib/anysign/css/sp.css")
      this.initCss("https://cdn1.huaruisales.com/mobsite/lib/anysign/css/mw480Portrait.css")
      this.initCss("https://cdn1.huaruisales.com/mobsite/lib/anysign/css/mw480Portrait.css")
      this.initCss("https://cdn1.huaruisales.com/mobsite/lib/anysign/css/sw1024.css")

      let header=document.getElementsByTagName("head")[0]
      let scripteSrcs = header.getElementsByTagName("script").src
      
      new Promise((resolve,resject)=>{
            let src = 'https://cdn1.huaruisales.com/mobsite/lib/anysign/libs/zlib/deflate.min.js'
            // let initFlag = this.jsInit(src)
            // if(initFlag){
            //   this.init()
            //   return
            // }
            let script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = src
            header.appendChild(script)
            script.onload =  script.onreadystatechange=function(){
                if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                  console.log(1)
                    resolve(true)
                }
                script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
            }
      }).then(result=>{
          return  new Promise((resolve,resject)=>{
              let script = document.createElement('script')
              script.type = 'text/javascript'
              script.src = 'https://cdn1.huaruisales.com/mobsite/lib/anysign/libs/CryptoJS v3.1.2/components/core-min.js'
              header.appendChild(script)
              script.onload =  script.onreadystatechange=function(){
                  if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                    console.log(2)
                      resolve(true)
                  }
                  script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
              }
            })
      }).then(result=>{
          return  new Promise((resolve,resject)=>{
              let script = document.createElement('script')
              script.type = 'text/javascript'
              script.src = 'https://cdn1.huaruisales.com/mobsite/lib/anysign/libs/CryptoJS v3.1.2/rollups/sha1.js'
              header.appendChild(script)
              script.onload =  script.onreadystatechange=function(){
                  if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                    console.log(3)
                      resolve(true)
                  }
                  script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
              }
            })
      }).then(result=>{
          return  new Promise((resolve,resject)=>{
              let script = document.createElement('script')
              script.type = 'text/javascript'
              script.src = 'https://cdn1.huaruisales.com/mobsite/lib/anysign/libs/CryptoJS v3.1.2/rollups/tripledes.js'
              header.appendChild(script)
              script.onload =  script.onreadystatechange=function(){
                  if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                    console.log(4)
                      resolve(true)
                  }
                  script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
              }
            })
      }).then(result=>{
          return  new Promise((resolve,resject)=>{
              let script = document.createElement('script')
              script.type = 'text/javascript'
              script.src = 'https://cdn1.huaruisales.com/mobsite/lib/anysign/libs/CryptoJS v3.1.2/components/mode-ecb.js'
              header.appendChild(script)
              script.onload =  script.onreadystatechange=function(){
                  if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                    console.log(5)
                      resolve(true)
                  }
                  script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
              }
            })
      }).then(result=>{
          return  new Promise((resolve,resject)=>{
              let script = document.createElement('script')
              script.type = 'text/javascript'
              script.src ='https://cdn1.huaruisales.com/mobsite/lib/anysign/libs/anysignCommentUI.js'
              header.appendChild(script)
              script.onload =  script.onreadystatechange=function(){
                  if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                    console.log(6)
                      resolve(true)
                  }
                  script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
              }
            })
      }).then(result=>{
          return  new Promise((resolve,resject)=>{
              let script = document.createElement('script')
              script.type = 'text/javascript'
              script.src = 'https://cdn1.huaruisales.com/mobsite/lib/anysign/libs/jquery-1.4.2.min.js'
              header.appendChild(script)
              script.onload =  script.onreadystatechange=function(){
                  if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                    console.log(7)
                      resolve(true)
                  }
                  script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
              }
            })
      }).then(result=>{
          return  new Promise((resolve,resject)=>{
              let script = document.createElement('script')
              script.type = 'text/javascript'
              script.src = 'https://cdn1.huaruisales.com/mobsite/lib/anysign/libs/anysign_all.min_2.js'
              header.appendChild(script)
              script.onload =  script.onreadystatechange=function(){
                  if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                    console.log(8)
                      resolve(true)
                  }
                  script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
              }
            })
      }).then(result=>{
          return  new Promise((resolve,resject)=>{
              let script = document.createElement('script')
              script.type = 'text/javascript'
              script.src = 'https://cdn1.huaruisales.com/mobsite/lib/anysign/anysignWebInterface_2.js'
              header.appendChild(script)
              script.onload =  script.onreadystatechange=function(){
                  if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){
                    console.log(9)
                      resolve(true)
                  }
                  script.onload.onload=script.onreadystatechange=null     //删除事件处理函数。
              }
            })
      }).then(result=>{
          window.loaded =true
          this.init()
      })

      }else if(window.anysignstartload == true){
        // this.init()
        var _this = this
        setTimeout(function(){
          _this.init()
          // console.log("111111111111111")
        },2000)
        
      }
      
    },
    mounted(){
    },
    methods: {
      initCss(url){
          let link = document.createElement('link')
          link.rel = "icon"
          link.href = url
          document.body.appendChild(link)
          // console.log('asyncLoadCss href=' + url)
      },
      init(){
        var res
        var _this = this
        //识别回调接口
        var identify_callback = function(errCode){
            if(errCode == "0"){
                return
            }
            if(errCode == "10003") {
                Toast.info("输入数据项无法解析！")
            } else if(errCode == "10011") {
                Toast.info("服务系统异常错误！")
            } else if(errCode == "10100") {
                Toast.info("识别结果为空！")
            } else if(errCode == "10101") {
                Toast.info("连接识别服务超时！")
            } else if(errCode == "10102") {
                Toast.info("连接识别服务异常！")
            } else if(errCode == "-1") {
                Toast.info("书写错误！")
            }else{
                Toast.info("签字识别失败，请稍后再试")
            }
        }
        
        var callback = function(context_id,context_type,val)
        {
            document.getElementById("other").style.display = "block"
            if(context_type == 10)
            {
                //签名回显
                console.log("签名返回：")
                _this.signInfo.signImg = val
                document.getElementById("xss_21").src = "data:image/png;base64,"+val
            }
            else if(context_type == 12)
            {
                //签名回显
                console.log("批注返回："+val)
                _this.signInfo.commentImg = val
            }
            let readyFlag = _this.apiInstance.isReadyToUpload()
            console.log(readyFlag)
            let sign = _this.apiInstance.getUploadDataGram()
            _this.signInfo.signData = sign
            document.getElementById("result").value=sign
            _this.$emit('getSignInfo', _this.signInfo)
        }//测试回调，将回调数据显示

        //设置签名算法，默认为RSA，可以设置成SM2
        EncAlgType.EncAlg = "RSA"
        this.apiInstance = new AnySignApi()
        var channel = "112321321"//渠道号，由信手书提供，请咨询项目经理
        //初始化签名接口
        res = this.apiInstance.initAnySignApi(callback,this.channel)
        if(!res){
            Toast.info("init error")
        }else{

        }

        //开启识别
        let ocrCapture = new OCRCapture();
            ocrCapture = this.ocrCapture;
        this.setIdentifyCallBack(identify_callback)

        res = this.testAddSignatureObj(21)
        if(!res){
            console.log("testAddSignatureObj error")
            return
        }else{

        }

        //注册一个单位签章
        var signer = new Signer("小明","110xxxxxx");
        var signerRule = new SignRule_Tid("888888");//服务器端生成的配置规则
        var cachet_config = new CachetConfig(signer, signerRule, false);

        // if(this.showFlag.comment){
        //   res = this.testAddCommentObj(30)
        //   //res = testAddCommentObj(31)
        //   if(!res){
        //       console.log("testAddCommentObj error")
        //       return
        //   }else{
  
        //   }
        // }

        //将配置提交
        res = this.apiInstance.commitConfig()

        if(res){
            console.log("Init ALL 提交配置成功")
        }else{
            console.log("Init ALL 提交配置失败")
        }
        this.testSetTemplateData()
      },
      testSetTemplateData(){
        //文件数据
        var formData = this.formData
        var businessId = this.businessNo//集成信手书业务的唯一标识
        var template_serial = this.templateId//用于生成PDF的模板ID
        var res
        //配置JSON格式签名原文
        /**
         * 设置表单数据，每次业务都需要set一次
         * @param template_type 签名所用的模板类型
         * @param contentUtf8Str 表单数据，类型为Utf8字符串
         * @param businessId 业务工单号
         * @param template_serial 模板序列号
         * @returns {*} 是否设置成功
         */
        res = this.apiInstance.setTemplate(TemplateType.PDF,formData,businessId,template_serial)

        if(res)
        {
            console.log("setTemplateData 0")
            this.$emit('initReady', true)
            return res
        }
        else
        {
            console.log("setTemplateData error")
            return res
        }
      },
      testCommentDialog(context_id){
            if(!this.apiInstance){
                console.log("信手书接口没有初始化")
                return
            }
            switch (this.apiInstance.showCommentDialog(context_id))
            {
                case 0:
                    document.getElementById("other").style.display = "none"
                    break
                case 1:
                    console.log("信手书接口没有初始化")
                    break
                case 2:
                    console.log("没有配置相应context_id的签字对象")
                    break
                case 5:
                    console.log("批注签名框已弹出，请勿重复操作！")
            }

      },
      testGenData(){
        
        var res = document.getElementById('result')
        try
        {
            console.log("value"+res.value)
        }
        catch(err)
        {
            console.log(err)
        }
        res.value = this.apiInstance.getUploadDataGram()
        this.signInfo.signData = res.value
        // console.log("最终返回"+JSON.stringify(this.signInfo))
         this.$emit('getSignInfo', this.signInfo)
      },
      setIdentifyCallBack(callback){
        if(!this.apiInstance){
            console.log("信手书接口没有初始化");
            return;
        }
        this.apiInstance.setIdentifyCallBack(callback);
      },
      testAddSignatureObj(objId){
            var context_id = objId;
            //必须要真实数据
            var signer = new Signer(this.signerInfo.userName, this.signerInfo.idNo);
            /**
             * 根据坐标定位签名方式
             * @param left 签名图片最左边坐标值，相对于PDF当页最左下角(0,0)点，向上和向右分别为X轴、Y轴正方向
             * @param top 签名图片顶边坐标值，相对于PDF当页最左下角(0,0)点，向上和向右分别为X轴、Y轴正方向
             * @param right 签名图片最右边坐标值，相对于PDF当页最左下角(0,0)点，向上和向右分别为X轴、Y轴正方向
             * @param bottom 签名图片底边坐标值，相对于PDF当页最左下角(0,0)点，向上和向右分别为X轴、Y轴正方向
             * @param pageNo 签名在PDF中的页码，从1开始
             * @param unit 坐标系单位，目前支持"dp"和"pt"
             * @constructor
             */
            if(objId == 20){
                var signerRule = new SignRule_XYZ(160.0, 420.1, 170.1, 390.0, 1, "pt");
            }else{
                var signerRule = new SignRule_XYZ(200.0, 65.1, 220.2, 50.3, 1, "pt");
            }
            // if(objId == 20){
            //     var signerRule = new SignRule_XYZ(100.0, 110.1, 180.2, 50.3, 1, "pt");
            // }else{
            //     var signerRule = new SignRule_XYZ(100.0, 110.1, 180.2, 50.3, 1, "pt");
            // }
            
            /**
             * 关键字定位方式，寻找PDF中的关键字，根据关键字位置放置签名图片
             * @param keyword 关键字
             * @param keyWordAlignMethod 签字图片和关键字位置关系：等于1时，签字图片和关键字矩形重心重合
             *                            等于2时，签字图片位于关键字正下方，中心线对齐；等于3时，签字图片位于关键字正右方，中心线对齐；
             *                            等于4时，签字图片左上角和关键字右下角重合，可能额外附加偏移量，详见构造函数的offset参数
             * @param keyWordOffset 当keyWordAlignMethod非零时，额外附加的偏移量，单位pt
             * @param pageNo 寻找关键字的PDF起始页码
             * @param KWIndex KWIndex 第几个关键字
             * @constructor
             */
            //    var signerRule = new SignRule_KeyWord("甲方签字",2,0,1,1);
            //var signerRule = new SignRule_KeyWordV2("签名算法",50,0,1,1);

            /**
             *根据关键字定位签名位置
                * @param keyWord 关键字字面值
                * @param xOffset X轴偏移量，适配关键字和规则
                * @param yOffset Y轴偏移量，适配关键字和规则
                * @param pageNo 签名在PDF中的页码，第几页查找关键字，正数为正序，当是负数为倒序
                * @param KWIndex KWIndex 第几个关键字
                * @constructor
                */
            //var signerRule = new SignRule_KeyWord("签名算法",100,100,1,1);
            // var signerRule = new SignRule_KeyWord(this.signRule.keyWord,this.signRule.keyWordAlignMethod,this.signRule.yOffset,this.signRule.pageNo,this.signRule.KWIndex)

            /**
             * 关键字定位方式，寻找PDF中的关键字，根据关键字位置放置签名图片
             * @param keyword 关键字
             * @param keyWordAlignMethod 签字图片和关键字位置关系：等于0时，签字图片和关键字矩形重心重合
             *                            等于1时，签字图片位于关键字正下方，中心线对齐；等于2时，签字图片位于关键字正右方，中心线对齐；
             *                            等于3时，签字图片左上角和关键字右下角重合，可能额外附加偏移量，详见构造函数的offset参数
             * @param keyWordOffset 当keyWordAlignMethod非零时，额外附加的偏移量，单位pt
             * @param pageNo 寻找关键字的PDF起始页码
             * @param KWIndex KWIndex 第几个关键字
             * @constructor
             */
            //var signerRule = new SignRule_KeyWordV2("关键字", "0", 10, 1,1);
            // var signerRule = new SignRule_KeyWordV2(this.signRule.keyWord,3,this.signRule.keyWordOffset,this.signRule.pageNo,this.signRule.KWIndex)
            var signatureConfig = new SignatureConfig(signer,signerRule);
            //1:时间在上、2：时间在下、3：时间在右
            var timeTag = new TimeTag(1,"yyMMdd hh:mm;ss");
            //signatureConfig.timeTag = timeTag;
            signatureConfig.singleWidth = this.signClass.singleWidth
            signatureConfig.singleHeight = this.signClass.singleHeight
            signatureConfig.title = this.signTitle
            signatureConfig.penColor = this.signClass.penColor
            signatureConfig.isTSS = false//是否开始时间戳服务
            // signatureConfig.antialias = true
            signatureConfig.signatureImgRatio = 3.0
            signatureConfig.nessesary = false
            signatureConfig.isdistinguish = this.isdistinguish//是否开启识别
            signatureConfig.ocrCapture = this.ocrCapture
            signatureConfig.isShowBgText = true;
            signatureConfig.isCheck = true;//true:本人签字，false:非本人签字
            var res = this.apiInstance.addSignatureObj(context_id,signatureConfig)
            if(res)
            {
                console.log("addSignatureObj "+context_id+" success");
                return res;
            }
            else
            {
                console.log("addSignatureObj "+context_id+" error");
                return res;
            }
      },
      testAddCommentObj(objId){
            var context_id = objId;
            var signer = new Signer(this.signerInfo.userName, this.signerInfo.idNo)
            /**
             * 根据坐标定位签名方式
             * @param left 签名图片最左边坐标值，相对于PDF当页最左下角(0,0)点，向上和向右分别为X轴、Y轴正方向
             * @param top 签名图片顶边坐标值，相对于PDF当页最左下角(0,0)点，向上和向右分别为X轴、Y轴正方向
             * @param right 签名图片最右边坐标值，相对于PDF当页最左下角(0,0)点，向上和向右分别为X轴、Y轴正方向
             * @param bottom 签名图片底边坐标值，相对于PDF当页最左下角(0,0)点，向上和向右分别为X轴、Y轴正方向
             * @param pageNo 签名在PDF中的页码，从1开始
             * @param unit 坐标系单位，目前支持"dp"和"pt"
             * @constructor
             */
            var signerRule = new SignRule_XYZ(10, 10, 20, 20, 1, "dp");
            /**
              * 关键字定位方式，寻找PDF中的关键字，根据关键字位置放置签名图片
              * @param keyword 关键字
              * @param keyWordAlignMethod 签字图片和关键字位置关系：等于1时，签字图片和关键字矩形重心重合
              *                           等于2时，签字图片位于关键字正下方，中心线对齐；等于3时，签字图片位于关键字正右方，中心线对齐；
              *                            等于4时，签字图片左上角和关键字右下角重合，可能额外附加偏移量，详见构造函数的offset参数
              * @param keyWordOffset 当keyWordAlignMethod非零时，额外附加的偏移量，单位pt
              * @param pageNo 寻找关键字的PDF起始页码
              * @param KWIndex KWIndex 第几个关键字
              * @constructor
            */
            var commentConfig = new CommentConfig(signer,signerRule);
            commentConfig.commitment = "本人已阅";
            commentConfig.mass_word_height = 50;
            commentConfig.mass_word_width = 50;
            commentConfig.mass_words_in_single_line = 4;
            commentConfig.penColor = "#FF0000";
            commentConfig.nessesary = true;
            commentConfig.isdistinguish = false;
            commentConfig.ocrCapture = this.getOcrCapture;
            commentConfig.mass_dlg_type = CommentInputType.WhiteBoard;
            var res = this.apiInstance.addCommentObj(context_id,commentConfig);
            if(res)
            {
                console.log("addCommentObj "+context_id+" success");
                return res;
            }
            else
            {
                console.log("addCommentObj "+context_id+" error");
                return res;
            }
      },
      testPopupDialog(context_id){
            if(!this.apiInstance){
                console.log("信手书接口没有初始化")
                this.init()
                // return
            }
            switch (this.apiInstance.showSingleSignDialog(context_id))
            {
                case 0:
                    document.getElementById("other").style.display = "none"
                    break
                case 1:
                    console.log("信手书接口没有初始化")
                    break
                case 2:
                    console.log("没有配置相应context_id的签字对象")
                    break
            }
      },
      testCommentDialog(context_id){
            if(!this.apiInstance){
                console.log("信手书接口没有初始化");
                return;
            }
            switch (this.apiInstance.showCommentDialog(context_id))
            {
                case 0:
                    document.getElementById("other").style.display = "none";
                    break;
                case 1:
                    console.log("信手书接口没有初始化");
                    break;
                case 2:
                    console.log("没有配置相应context_id的签字对象");
                    break;
                case 5:
                    console.log("批注签名框已弹出，请勿重复操作！");
            }
      },
      signSubmit(){
        // console.log(this.apiInstance);
        // let data = this.apiInstance.getEmptyFlag()
        if(!window.emptyFlag()){
          Toast.info("请签名")
          return
        }
        window.signConfirm()
      }
      
    }
  }
</script>
<style lang="less" scoped>
.anySign{
    .comment_titlecss {
        font-size: 20px;
        clear: both;
    }
    
    .comment_btncontainer {
        /*text-align: center;
        font-size: 30pt;
        width: 100%;
        clear: both;*/
        
        text-align: center;
        margin:0 auto;
        font-size: 20px;
        width: 100%;
        clear: both;
        position: absolute;
        bottom: 10;
    }
    
    .signImagecss {
        -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
        overflow: scroll;
        border: 1px solid rgb(229, 229, 229)
    }
    
    .tmpcanvascss {
        border: 1px solid rgb(229, 229, 229)
    }
    
    .btn_orange {
        font-size: 20pt;
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    }
}
</style>